<template>
  <div class="home">
    <div class="background">
      <!-- <h3>欢迎来到</h3>
      <h2>超级杰克的后台信息管理系统</h2> -->
      <!-- 饼状图表 -->
      <div class="mycard">
        <div class="dashbord-left">
          <div class="dashbord-left-title">
            早安，{{this.user.name ? this.user.name : "打工人"}}，请开始一天的工作吧
          </div>
          <div class="dashbord-left-dot">
            今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。
          </div>
          <div class="dashbord-left-rows">
            <el-row :gutter="20">
              <el-col :span="8" :xs="24" :sm="8">
                <div class="flex-center">
                  <i class="el-icon-sort icon" />今日流量 (3)
                </div>
              </el-col>
              <el-col :span="8" :xs="24" :sm="8">
                <div class="flex-center">
                  <i class="el-icon-s-custom icon" />用户数 ({{this.users}})
                </div>
              </el-col>
              <el-col :span="8" :xs="24" :sm="8">
                <div class="flex-center">
                  <i class="el-icon-s-comment icon" />资金流水数量 ({{this.profiles}})
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <img src="@/assets/dashbord.png" class="dashbord-right" alt />
      </div>
      <div class="echarts">
        <div class="pie">
        <h2>资金流水类型饼图</h2>
        <div id="pie" style="width: 600px; height: 400px" ref="pie"></div>
      </div>
      <div class="bar">
        <h2>总收入与总支出柱状图</h2>
        <div id="bar" style="width: 700px; height: 400px" ref="bar"></div>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Home",
  data() {
    return  {
        profiles:null,
        users:null
      }
  },
  created() {
    this.getAllProfiles();
    this.getAllUsers();
  },
  computed:{
      user() {
        return this.$store.getters.user
      }
  },
  methods: {
    getAllUsers() {
      //获取用户总数
      this.$axios.get("/api/users").then(res => {
        this.users = res.data.length;
      })
    },
    getAllProfiles() {
      this.$axios.get("/api/profiles").then((res) => {
        const typeList = res.data;
        //获取所有资金流水总数
        this.profiles = typeList.length;
        console.log(typeList);
        //拿到所有类型数组
        let typeArr = typeList.map((item) => {
          return item.type;
        });
        console.log(typeArr);
        const newTypeArr = [];
        //拿到所有的类型的计数
        for (let i = 0; i < typeArr.length; i++) {
          if (typeArr[i] in newTypeArr) {
            newTypeArr[typeArr[i]] = newTypeArr[typeArr[i]] + 1;
          } else {
            newTypeArr[typeArr[i]] = 1;
          }
        }
        let allIncome = [
          { name: "提现手续费", count: 0 },
          { name: "充值", count: 0 },
          { name: "提现", count: 0 },
          { name: "转账", count: 0 },
          { name: "充值礼券", count: 0 },
          { name: "优惠券", count: 0 },
        ];
        let allExpend = [
          { name: "提现手续费", count: 0 },
          { name: "充值", count: 0 },
          { name: "提现", count: 0 },
          { name: "转账", count: 0 },
          { name: "充值礼券", count: 0 },
          { name: "优惠券", count: 0 },
        ];
        // allIncome["提现手续费"] = 0;
        // allIncome["充值"] = 1;
        // allIncome["提现"] = 2;
        // allIncome["转账"] = 3;
        // allIncome["充值礼券"] = 4;
        // allIncome["优惠券"] = 5;
        //拿到所有类型收入数组
        for (let i = 0; i < typeArr.length; i++) {
          if (typeArr[i] == "提现手续费") {
            allIncome[0].count += typeList[i].income - 0;
          } else if (typeArr[i] == "充值") {
            allIncome[1].count += typeList[i].income - 0;
          } else if (typeArr[i] == "提现") {
            allIncome[2].count += typeList[i].income - 0;
          } else if (typeArr[i] == "转账") {
            allIncome[3].count += typeList[i].income - 0;
          } else if (typeArr[i] == "充值礼券") {
            allIncome[4].count += typeList[i].income - 0;
          } else if (typeArr[i] == "优惠券") {
            allIncome[5].count += typeList[i].income - 0;
          }
        }
        //拿到所有类型支出数组
        for (let i = 0; i < typeArr.length; i++) {
          if (typeArr[i] == "提现手续费") {
            allExpend[0].count += typeList[i].expend - 0;
          } else if (typeArr[i] == "充值") {
            allExpend[1].count += typeList[i].expend - 0;
          } else if (typeArr[i] == "提现") {
            allExpend[2].count += typeList[i].expend - 0;
          } else if (typeArr[i] == "转账") {
            allExpend[3].count += typeList[i].expend - 0;
          } else if (typeArr[i] == "充值礼券") {
            allExpend[4].count += typeList[i].expend - 0;
          } else if (typeArr[i] == "优惠券") {
            allExpend[5].count += typeList[i].expend - 0;
          }
        }
        console.log(allIncome);
        console.log(allExpend);
        typeArr = newTypeArr;
        console.log(typeArr);
        this.echartsPie(typeArr);
        this.echartsBar(allIncome, allExpend);
      });
    },
    echartsPie(arr) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.pie);
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "资金流水类型",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "28",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: arr["优惠券"], name: "优惠券" },
              { value: arr["提现手续费"], name: "提现手续费" },
              { value: arr["充值礼券"], name: "充值礼券" },
              { value: arr["转账"], name: "转账" },
              { value: arr["充值"], name: "充值" },
              { value: arr["提现"], name: "提现" },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    echartsBar(arr1, arr2) {
      let myChart = echarts.init(this.$refs.bar);
      let option = {
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ["收入与支出", "收入", "支出"],
            ["提现手续费", arr1[0].count, arr2[0].count],
            ["充值", arr1[1].count, arr2[1].count],
            ["提现", arr1[2].count, arr2[2].count],
            ["转账", arr1[3].count, arr2[3].count],
            ["充值礼券", arr1[4].count, arr2[4].count],
            ["优惠券", arr1[5].count, arr2[5].count],
          ],
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: "bar" }, { type: "bar" }],
      };

      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  background: #f0f2f5;
  padding: 0;
  /* background: url("../assets/showcase.png") no-repeat;
  background-size: 100% 100%; */
}
.background {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 30px 20px;
  /* background-color: rgba(0, 0, 0, 0.7); */
  text-align: center;
  color: black;
}
.mycard {
  background-color: #fff;
  border-radius: 10px;
  padding: 10px 30px;
  overflow: hidden;
  margin-bottom: 30px;
  box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.03);
  width: 100%;
  height: 140px;
  display: flex;
  align-content: center;
  justify-content: space-between;
  color: #777;
}
.mycard .dashbord-left-title {
  margin-top: 15px;
  font-size: 20px;
  color: #000;
  text-align: left;
}
.mycard .dashbord-left-dot {
  margin-top: 10px;
  font-size: 14px;
  text-align: left;
}
.mycard .dashbord-left-rows {
  width: 600px;
  align-items: center;
}
.el-row {
  padding: 10px 0;
  display: flex;
  flex-wrap:wrap ;
}
.flex-center {
    display: flex;
    align-items: center;
}
.flex-center .icon {
  margin-right: 10px;
}
.mycard .dashbord-right {
  width: 600px;
  height: 600px;
  margin-top: -228px;
}
.echarts {
  background-color: #fff;
  border-radius: 10px;
  height: auto;
  padding: 10px 10px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.03);
}
.pie {
  float: left;
  width: 600px;
  height: 400px;
}
.bar {
  float: left;
  width: 700px;
  height: 400px;
}
</style>